<!--
 * @Description: 字典管理
 * @Author: Boide
 * @Date: 2021-09-02 17:03:10
 * @LastEditors: guiyi@hongyi.tech
 * @LastEditTime: 2021-09-18 19:07:23
-->
<template>
	<el-card class="box-card">
		<el-form ref="queryForm" :model="query" :inline="true">
			<el-form-item label="名称" prop="name">
				<el-input v-model="query.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery(1)" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleQuery(1)">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb20">
			<el-col :span="1.5">
				<el-button v-hasPermi="['/params/add']" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
			</el-col>
		</el-row>

		<el-card class="box-card">
			<el-table v-loading="listLoading" :data="dataList" border>
				<el-table-column prop="name" label="名称" show-overflow-tooltip width="200" />
				<el-table-column prop="type" label="类型" show-overflow-tooltip width="120">
					<template slot-scope="{row}">
            <span v-if="row.type===1">map</span>
            <span v-else-if="row.type===2">string</span>
            <span v-else-if="row.type===3">int</span>
            <span v-else-if="row.type===4">list</span>
          </template>
        </el-table-column>
				<el-table-column prop="keyType" label="key类型" show-overflow-tooltip width="120">
					<template slot-scope="{row}">
            <span v-if="row.type===1">integer</span>
            <span v-else>string</span>
          </template>
        </el-table-column>
				<el-table-column prop="description" label="描述" show-overflow-tooltip width="320" />
				<el-table-column prop="value" label="键值内容" show-overflow-tooltip width="320" />
				<el-table-column label="创建时间" align="center" prop="ctime">
					<template slot-scope="scope">
						<span>{{ scope.row.ctime | parseTime }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
					<template slot-scope="{row}">
						<el-button v-hasPermi="['/params/edit']" type="text" @click="handleUpdate(row.id)">编辑</el-button>
						<el-button v-hasPermi="['/params/del/*']" type="text" @click="handleDelete(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<pagination v-show="total>0" :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="handleQuery" />
		</el-card>

		<!-- 添加或修改字典 -->
		<el-dialog :title="(formModel.id?'编辑':'新增')+'字典'" :visible.sync="formVisible" width="600px" append-to-body>
			<el-form ref="formModel" :model="formModel" :rules="formRules" label-width="80px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="键值" prop="name">
							<el-input :disabled="!!formModel.id" v-model="formModel.name" placeholder="请输入键值" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="类型" prop="type">
							<el-select v-model="formModel.type" placeholder="请选择类型" clearable>
								<el-option label="map" :value="1"></el-option>
								<el-option label="string" :value="2"></el-option>
								<el-option label="int" :value="3"></el-option>
								<el-option label="list" :value="4"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item v-if="formModel.type===1" label="key类型" prop="keyType">
							<el-select v-model="formModel.keyType" placeholder="请选择key类型" clearable>
								<el-option label="integer" :value="1"></el-option>
								<el-option label="string" :value="0"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="键值内容" prop="value">
							<el-input v-model="formModel.value" type="textarea" :autosize="{ minRows: 6 }" placeholder="请输入键值的内容"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="描述">
							<el-input v-model="formModel.description" placeholder="请输入描述"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="formVisible=!formVisible;reset;">取 消</el-button>
				<el-button :loading="submitLoading" type="primary" @click="submitForm">确 定</el-button>
			</div>
		</el-dialog>
	</el-card>
</template>

<script>
import { paramsListPage, paramsGetId, paramsAdd, paramsUpdate, paramsDel } from '@/api/system/dictionary'
export default {
  data () {
    return {
      // 列表数据
      query: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dataList: null,
      listLoading: false,
      // 新增/编辑字典
      formVisible: false,
      submitLoading: false,
      formModel: {
        inuse: 1
      },
      formRules: {
        name: [
          { required: true, message: "名称不能为空" }
        ],
        type: [
          { required: true, message: "请选择模块类型" }
        ],
        keyType: [
          { required: true, message: "请选择key类型" }
        ],
        value: [
          { required: true, message: "请输入键值的内容" }
        ],
      }
    }
  },
  created () {
    this.handleQuery()
  },
  methods: {
    handleQuery (pageNum) {
      if (pageNum===1) this.query.pageNum = 1
      this.listLoading = true
      paramsListPage(this.query).then(res => {
        const { records, total } = res.data
        this.dataList = records
        this.total = total
        this.listLoading = false
      }).catch(err => {
        if (err.code === -103) {
          this.$router.push('/403')
        }
        this.listLoading = false
      })
    },
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery(1)
    },
    handleAdd () {
      this.reset()
      this.formVisible = !this.formVisible
    },
    handleUpdate (id) {
      this.handleAdd()
      paramsGetId(id).then(res => {
        this.formModel = { ...res.data }
      })
    },
    handleDelete (id) {
      this.$confirm(`请确认是否要删除该字典?`, { type: 'warning' }).then(() => {
        paramsDel(id).then(() => {
          this.$message.success('删除成功')
          this.handleQuery()
        })
      })
    },
    // 新增/编辑
    submitForm () {
      this.submitLoading = true
      this.$refs["formModel"].validate(async valid => {
        if (valid) {
          try {
            if (this.formModel.id) {
              await paramsUpdate(this.formModel)
              this.$message.success('修改成功')
            } else {
              await paramsAdd(this.formModel)
              this.$message.success('新增成功')
            }
            this.formVisible = !this.formVisible
            this.handleQuery()
            this.submitLoading = false
          } catch (error) {
            this.submitLoading = false
          }
        } else {
          this.submitLoading = false
        }
      })
    },
    // 表单重置
    reset () {
      this.formModel = {
        inuse: 1
      }
      this.resetForm("formModel")
    }
  }
}
</script>
